<template>
    <div class="animated fadeInDown background" style="position: relative;height: 510px;width: 100%">
        <div class="animated zoomInRight" style="font-weight: 600;font-size: 41px;color: #ffffff;position: absolute;left: 50%;top: 38%;transform: translateX(-50%)">详情页</div>
        <!--                先把盒子定位到最顶部  11-->
        <!--                再进行导航的创建-->
        <Header></Header>
    </div>
</template>

<script>
    import Header from "./Header";
    export default {
        components:{
          Header
        },
        name: "DetailTop"
    }
</script>

<style  scoped>
    .head1{
        cursor: pointer;
    }
    .bar1-in {
        transition: all 0.4s;
        width: 0;
        height: 100%;
        background-color: #80C8F8;

    }

    .head1:hover .bar1-in {
        background-color: #80C8F8;
        height: 100%;
        width: 100%;
    }
    .background{
        background-color: #49B1F5;
        background-image: url("../../assets/img/detailimg.jpeg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 10% 10%;
        /*back*/
        /*background-position: 0 50px;*/
    }
</style>